<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>内联块状元素</title>
    <style type="text/css">
    a {
        display:inline-block;
        width: 20px;
        /*在默认情况下宽度不起作用*/
        height: 20px;
        /*在默认情况下高度不起作用*/
        background: pink;
        /*设置背景颜色为粉色*/
        text-align: center;
        /*设置文本居中显示*/
    }
    </style>
</head>

<body>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
</body>

</html>
<!-- 
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
-->


<!-- 
inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。  
-->